<template>
	<div style="width: 500px;height: 500px;">
		<!--    标题、上月、下月-->
		<div class="width-100-per layout-side" style="height: 10%;">
			<div class="cursor-pointer layout-center leftRightBtn" @click="prevMonth">&lt;</div>
			<div class="height-100-per layout-center-top width-40-per">
				<div class="layout-center timeTitle">
					<span style="font-weight: bold">{{`${newDate.split('-')[0]}年${newDate.split('-')[1]}月`}}</span>
				</div>
			</div>
			<div class="cursor-pointer layout-center leftRightBtn" @click="nextMonth">&gt;</div>
		</div>
		<!--    日期表-->
		<div class="width-100-per layout-left-top padding-10-px" style="height: calc(100% - 10%)">
			<!--      星期-->
			<div class="width-100-per layout-left-top" style="height: 10%">
				<div style="width: calc(100% / 7);" class="layout-center" v-for="(i,index) in weekArr" :key="index + i">
					{{i}}
				</div>
			</div>
			<!--      日期-->
			<div class="width-100-per layout-left-top" style="height: 90%">
				<template v-for="(i,index) in dateArr">
					<div class="layout-center tableCol" :style="{height: 'calc(100% / '+maxTableRow+')'}" :key="index"
						:class="{'topBorderNone':index<7,'rightBorderNone':(index+8)%7===0}">
						<div :title="i" class="width-100-per height-100-per layout-center"
							:class="{'checked':i===thisDate}" style="cursor: default;position: relative">
							<span>{{i === '' ? '' : Number(i.split('-')[2])}}</span>
							<div v-if="showDayStatus(i)">
								<div v-if="green(i)" class="checkBadge"></div>
								<div v-else class="checkBadge1"></div>
							</div>

						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
	

</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				thisDate: moment().format('YYYY-MM-DD'), //当前时间
				thisMonthDays: '', //当月天数
				thisDateWeek: '', //当月第一天是星期几
				newDate: '', //标题展示时间
				dateArr: [], //日期数组，有则填日期，无则填‘’
				weekArr: ['七', '一', '二', '三', '四', '五', '六'],
				checkArr: [
					// {
					//   checkinginTime: '2023-08-04',
					//   ip: '111'
					// },
					// {
					//   checkinginTime: '2023-08-05',
					//   ip: '111'
					// },
					// {
					//   checkinginTime: '2023-08-06',
					//   ip: '111'
					// }
				], //已经打过卡的数组，由后端返回，这里写死
				maxTableRow: 0, //列固定7列，这是当月最大行数
			}
		},
		mounted() {
			this.calendarTable(this.thisDate);
			this.getEmpSign();
		},
		computed: {
			green() {
				const that = this;
				return function(value) {
					if (!!value) {
						let flag = true;
						for (const ca of that.checkArr) {
							if ((ca.dataTime).indexOf(value) > -1){
								if (ca.elg == 0) {
									flag = false
								}
							}
						}
						return flag
					}
				}
			},
			//判断当天状态
			showDayStatus() {
				const that = this;
				return function(value) {
					if (!!value) {
						let flag = false;
						for (const ca of that.checkArr) {
							if ((ca.dataTime).indexOf(value) > -1) {
								flag = true
							}
						}
						return flag
					}
				}
			},
		},
		methods: {
			//获取考勤信息
			getEmpSign: function() {
				this.http.get({
					url: "/emp/qiandao/all",
					param: {
						empId: this.empId
					}
				}).then(res => {
					this.checkArr = res.checkArr;
				});
			},
			//绘制日历表格
			calendarTable(date) {
				const that = this;
				that.dateArr = [];
				that.newDate = date;
				let yearMonthDay = that.newDate.split('-');
				//当月天数
				that.thisMonthDays = moment(date).daysInMonth();
				//当月一号是星期几
				that.thisDateWeek = moment(date).date(1).weekday();
				let calendarArr = [];
				//往日历数组装每天的日期
				for (let i = 1; i < that.thisMonthDays + 1; i++) {
					calendarArr.push(yearMonthDay[0] + '-' + yearMonthDay[1] + '-' + (i < 10 ? '0' + i : i))
				}
				// 有当月一号是星期几根据规则往前面补空位
				for (let j = 0; j < that.thisDateWeek; j++) {
					calendarArr.unshift('')
				}
				// 表格列数固定为7列，获取最大行数
				let len = calendarArr.length;
				let arrRow = Math.ceil(len / 7);
				that.maxTableRow = arrRow;
				// 获取整个表格的格子个数，给多余的格子补空
				for (let k = 0; k < arrRow * 7 - len; k++) {
					calendarArr.push('')
				}
				that.dateArr = calendarArr;
			},
			//上个月
			prevMonth() {
				const that = this;
				let date = moment(that.newDate).subtract(1, 'months').format('YYYY-MM-DD');
				that.calendarTable(date)
			},
			// 下个月
			nextMonth() {
				const that = this;
				let date = moment(that.newDate).add(1, 'months').format('YYYY-MM-DD');
				that.calendarTable(date)
			},
		}
	}
</script>


<style>
	.timeTitle {
		margin-top:1px;
		width: 100%;
		height: 100%;
		color: black;
	
	}

	.tableCol {
		width: calc(100% / 7);
		border-top: 1px dashed rgb(203, 201, 163);
		border-right: 1px dashed rgb(203, 201, 163)
	}

	.leftRightBtn {
		width: 10%;
		height: 100%;
	}

	.leftRightBtn:hover,
	.tableCol:hover {
		color: black;
		background: #FFFF99;
	}

	.checked {
		color: black;
		background: #FFFF99;
		cursor: pointer !important;
	}

	.checkBadge {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #52c41a;
		bottom: 28px;
		left: 18px;
		position: relative
	}

	.checkBadge1 {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #ff0000;
		bottom: 28px;
		left: 18px;
		position: relative
	}

	.topBorderNone {
		border-top: none !important;
	}

	.rightBorderNone {
		border-right: none !important;
	}

	/*布局部分*/
	.layout-side {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: space-between;
		align-items: center;
	}

	.layout-center {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: center;
		align-items: center;
	}

	.layout-center-top {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		justify-content: flex-start;
		align-items: center;
	}

	.layout-left-top {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		justify-content: flex-start;
		align-items: flex-start;
	}
</style>